<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<style>
    *{ margin:0; padding:0;}
    .div{ opacity:0.5; -moz-opacity:0.5;border:3px solid fuchsia}

    .log_window {
        width:200px;
        height:200px;
        background-color:#000;
        margin: auto;
        position: absolute;
        z-index:3;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display:none;
    }
    *{ margin:0; padding:0;}
    #maskLayer{ width:100%; height:900px; background-color:#000000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);z-index: 9999;}
</style>
<div id="app">
    <!--<div id="maskLayer">遮罩层</div>-->


    <testdiv ></testdiv>

    <div class="div">
        <my-component :myname="name" :mycols="cols" :mylist="list" :mysearch="search" @delrecord="delrecord" @open="open" @editdata="editdata"></my-component>
    </div>
    <br/>
    <div>
        <create @savedata="savedata" @close="close" @update="update" :show="show"></create>
    </div>
</div>

<template id="create">
    <div class="div" v-show="show">
        <table border="1" align="center" width="50%" >

            <tr>
                <th colspan="2">添加</th>
            </tr>
            <tr align="center">
                <td>名字:</td>
                <td><input v-model="divmap.name" /></td>
            </tr>
            <tr align="center">
                <td>年龄:</td>
                <td><input v-model="divmap.age" /></td>
            </tr>
            <tr align="center">
                <td>性别:</td>
                <td><input v-model="divmap.sex" /></td>
            </tr>
            <tr align="center">
                <td colspan="2"><button @click="update">更新</button></td>
            </tr>
            <tr align="center">
                <td colspan="2"><button @click="save">保存</button></td>
            </tr>
            <tr align="center">
                <td colspan="2"><button @click="close">关闭</button></td>
            </tr>
        </table>
    </div>
</template>

<template id="myComponent">
    <table border="1" align="center" width="50%">
        <tr>
            <td>查询</td>
            <th colspan="5"><input size="100" v-model="searchvalue" /></th>
        </tr>
        <tr align="center">
            <td v-for="col in mycols">{{col | filterCols}}</td>
            <td>delete</td>
        </tr>
        <tr  v-for="map in filterList" >
            <td v-for="(col,index) in mycols">
                <a href="javascript:void(0)" @click="edit(map)" v-if="col==='name'">{{map[col]}}</a>
                <template v-else>
                    {{map[col]}}
                </template>
            </td>
            <td><button  @click="delrecord(map)">删除</button></td>
        </tr>
        <tr align="left">
            <td colspan="2"><button @click="open">新增</button></td>
        </tr>
    </table>
</template>

<template id="test">

    <table border="1" align="center" width="50%">
        <tr align="center">
            <td v-for="(iteam,key) in userdataperm">{{key}}</td>
            <td><button @click="initjson">新增</button></td>
        </tr>
        <tr align="center">
            <td v-for="(iteam,key) in userdataperm">{{iteam}}</td>
            <td><button @click="initjson">新增</button></td>
        </tr>
    </table>
</template>

<script>
    var Bus = new Vue()
    //   Vue.http.options.emulateJSON = true;

    var test = {
        template: '#test',
        props: {
            //    userdataperm:Object

        },
        data:function(){
            return{searchvalue :'',userdataperm:{aa:'123',bb:'456'}}

        },
        methods:{
            initjson : function(){
                this.$http.post('http://localhost:8080/nmis-main/main/main.json?zz=123',{id:'canshuid',name:'canshuname'}).then(function(json){
                    var data = json.data;
                    this.userdataperm=data.userdataperm;
                    //    alert(json);
                })
                //java 接受post请求payload内的参数    {id:'canshuid',name:'canshuname'}
                /*                 	@RequestMapping("main")
                 public String main(@RequestBody Map payload,Model m,HttpServletRequest req) throws IOException {
                 req.getParameter("id");//问号追加的参数
                 //payload  $http.post url 后面追加的对象参数 {id:'canshuid',name:'canshuname'}
                 m.addAllAttributes(serv.main());
                 m.addAllAttributes(payload);
                 return "main";
                 } */
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'keepfool',
            search : 'z',
            cols : ['name','age','sex'],
            list : [
                {name:"zhangsan1",age:"21",sex:"nan"},
                {name:"zhangsan2",age:"22",sex:"nv"},
                {name:"zhangsan3",age:"23",sex:"nan"},
                {name:"zhangsan4",age:"24",sex:"nv"}
            ],
            show : false
        },
        methods:{
            delrecord : function(value){
                var d = this.list;
                this.list.forEach(function (iteam,i){
                    if(iteam === value){
                        d.splice(i,1);
                        return;
                    }
                })
            },
            savedata : function(value){
                this.list.push(value);
            },
            editdata : function(map){
                //    this.list.push(value);
                this.$children[1].divmap=this.initItemForUpdate(map);
                this.$children[1].oldmap=map;
                this.show=true;
            },
            update : function(newmap,oldmap){
                var data = this.list;

                data.forEach(function(iteam,i){
                    if(oldmap===iteam){
                        data.splice(i,1);
                    }
                })
                data.push(newmap);
                this.show=false;
            },
            close : function(){
                this.show=false;
            },
            open : function(){
                this.$children[1].divmap={};
                this.show=true;
            },
            initItemForUpdate: function(p) {
                var c = c || {};
                for(var i in p) {
                    // 属性i是否为p对象的自有属性
                    if(p.hasOwnProperty(i)) {
                        if(typeof p[i] === 'object') {
                            c[i] = Array.isArray(p[i]) ? [] : {}
                            deepCopy(p[i], c[i])
                        } else {
                            // 属性是基础类型时，直接拷贝
                            c[i] = p[i]
                        }
                    }
                }
                return c;
            }
        },
        components: {
            'testdiv':test,
            'my-component': {
                template: '#myComponent',
                props: {
                    myname:String,
                    mycols:Array,
                    mylist:Array,
                    mysearch:String
                },
                data:function(){
                    return{searchvalue :'' }
                },
                methods:{
                    delrecord : function(value){
                        this.$emit('delrecord',value);
                    },
                    showWindow : function(){
                        Bus.$emit('showWindow');
                    },
                    open : function(){
                        this.$emit('open');
                    },
                    edit : function(map){
                        this.$emit('editdata',map);
                        this.map = {};
                    }
                },
                computed: {
                    initsearch: function () {
                        this.searchvalue=this.mysearch
                        return this.searchvalue;
                    },
                    filterList : function(){
                        var self = this;
                        return self.mylist.filter(function(mapaa){
                            for(key in mapaa){
                                if(mapaa[key].indexOf(self.searchvalue)!==-1){
                                    return true;
                                }
                            }
                        })
                    }
                },
                filters : {
                    filterCols : function(value){
                        return value.toUpperCase();
                    }
                }
            },
            'create': {
                template: '#create',
                props: {
                    show:true
                },
                data:function(){
                    return{
                        divmap:{name:'姓名',age:'99',sex:'bunanbunv'},
                        oldmap:{name:'姓名',age:'99',sex:'bunanbunv'}
                    }
                },
                methods:{
                    save : function(){
                        this.$emit('savedata',this.divmap);
                        this.divmap = {};
                    },
                    close : function(){
                        this.$emit("close");
                    },
                    update : function(){
                        this.$emit('update',this.divmap,this.oldmap);
                    }
                },
                computed: {
                },
                filters : {

                },
                created : function(){
                    Bus.$on('showWindow',function(){
                        this.show=true;
                    })
                }
            }

        }
    })
</script>